<!doctype html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Second batch JS</title>
</head>

<style>
#spinner {
  width: 600px;
  height: 10px;
  border-right: black;
  position: relative;
  background: repeating-linear-gradient(
    -45deg,
    orange,
    orange 21px,
    yellow 21px,
    yellow 42px
  );
}
#spinner-container {
  width: 300px;
  height: 10px;
  overflow: hidden;
  border: solid thin darkorange;
  border-radius: 4px;
  margin-top: 50px;
}
.spinner-loaded #spinner {
  background: repeating-linear-gradient(
    -45deg,
    steelblue,
    steelblue 21px,
    aqua 21px,
    aqua 42px
  );
}
#spinner-container.spinner-loaded {
  border: solid thin steelblue;
}
input {
  font-size: 150%;
  width: 302px;
  margin-top: 30px;
  margin-bottom: 30px;
}
</style>

<center>
  <div id="spinner-container">
    <div id="spinner"></div>
  </div>

  <input id="load" type="button" value="Start loading" onclick="kickOffLoading()"></input>
  <input id="run" style='display: none' type="button" value="Click me!" onclick="onRunClick()"></input>

  <p id="results"></p>

  <p>Note: running this test interactively may activate compositor
  prioritization during loading, which may skew the results.</p>
</center>

<script>
// Flag that indicates the test is ready to begin.
window.__ready = false;

// Flag that indicates the test has finished executing.
window.__finished = false;

var results = document.getElementById('results');

function kickOffLoading() {
  var loadButton = document.getElementById('load');
  loadButton.disabled = true;

  var variant =
    location.search.length > 0 ? location.search.substr(1) : 'medium';
  var script = document.createElement('script');
  script.setAttribute('type', 'text/javascript')
  script.setAttribute('src', 'second_batch_js_' + variant + '.min.js')
  script.addEventListener('load', onLoadComplete);
  document.body.appendChild(script);
}

function onLoadComplete() {
  var loadButton = document.getElementById('load');
  var runButton = document.getElementById('run');
  loadButton.style.display = 'none';
  runButton.style.display = 'block';
  spinnerContainer.classList.add('spinner-loaded');
  window.__ready = true;
}

function onRunClick() {
  results.innerText = 'Your lucky number is: ' + main(1);
  window.requestAnimationFrame(finishTest);
}

function finishTest() {
  window.__finished = true;
}

// Perform main thread animation during the benchmark to gauge main thread
// responsiveness.
var spinner = document.getElementById('spinner');
var spinnerContainer = document.getElementById('spinner-container');
function animateSpinner(timestamp) {
  var width = parseInt(window.getComputedStyle(spinnerContainer).width);
  var x = -(timestamp / 8) % width;
  spinner.style.left = x + 'px';
  window.requestAnimationFrame(animateSpinner);
}
window.requestAnimationFrame(animateSpinner);
</script>

</html>
